<template>
  <div class='container'>
    <el-card>
        <el-button @click="addSubject" class="right" type="success" icon="el-icon-edit" size="small">新增学科</el-button>
        <el-form ref="form" :model="queryData" label-width="80px" class="ff">
          <el-form-item label="学科名称">
            <el-input v-model="queryData.subjectName" size="small" class="input-with-select"></el-input>
          </el-form-item>
        </el-form>
        <div class="move">
          <el-button @click="clearRight" size="small" class="btn">取消</el-button>
          <el-button @click="searchRight" type="primary" size="small">搜索</el-button>
        </div>
      <!-- 警告 -->
      <el-alert
        :title="'共'+counts+'条数据'" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        element-loading-text="给我一点时间"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay === 0">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量">
        </el-table-column>
        <el-table-column
          label="操作"
          width="240">
          <template slot-scope="scope">
            <el-button type="text" class="color" @click="go(scope.row)">学科分类</el-button>
            <el-button type="text" class="color" @click="gogo(scope.row)">学科标签</el-button>
            <el-button @click="editSubject(scope.row)" type="text" class="color">修改</el-button>
            <el-button @click="deleteSubject(scope.row)" type="text" class="color">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <PageToll
        :total="counts"
        :paginationPage="queryData.page"
        :paginationPagesize="queryData.pagesize"
        @pageChange="pageChange"
        @pageSizeChange="onPageSizeChange"/>
    </el-card>
    <!-- 编辑弹话框组件 -->
    <SubjectAdd
      v-if="flag.show"
      :isShow="flag"
      :control="control"
      :ruleForm="ruleForm"
      @close="close"/>
  </div>
</template>

<script>
import PageToll from '@/module-manage/components/page-tool.vue'
import { list, remove } from '@/api/hmmm/subjects.js'
import SubjectAdd from '../components/subjects-add.vue'
import moment from 'moment'
export default {
  name: 'subject',
  components: {
    PageToll,
    SubjectAdd
  },
  filters: {
    dateFormat: function (val) {
      return moment(val).format('YYYY--MM--DD  HH:mm:ss')
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 查询参数
      queryData: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 传给子组件的
      ruleForm: {},
      // 数据总数
      counts: 0,
      // 控制谈话框显示
      flag: {
        show: false
      },
      // 控制子组件点击确认按钮触发那个发送事件
      control: true,
      // 加载
      loading: false
    }
  },
  created () {
    this.getSubject()
  },

  methods: {
    // 获取学科
    async getSubject () {
      this.loading = true
      const res = await list(this.queryData)
      this.tableData = res.data.items
      this.counts = res.data.counts
      this.loading = false
    },
    // 改变页码
    pageChange (e) {
      this.queryData.page = e
      this.getSubject()
    },
    // 改变显示个数
    onPageSizeChange (e) {
      this.queryData.pagesize = e
      this.getSubject()
    },
    // 清空
    clearRight () {
      this.queryData.subjectName = ''
      this.getSubject()
    },
    // 搜索
    searchRight () {
      this.queryData.page = 1
      this.getSubject()
    },
    // 编辑按钮
    editSubject (row) {
      this.ruleForm = JSON.parse(JSON.stringify(row))
      // 将对话框开启
      this.flag.show = true
    },
    // 新增学科
    addSubject () {
      // 将对话框开启
      this.flag.show = true
      // 将对话框的点击确认按钮开启添加模式
      this.control = false
    },
    // 删除
    deleteSubject (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (res.status === 200) {
          this.$message.success('删除成功')
          this.getSubject()
        } else {
          this.$message.success('删除成功!')
        }
      }).catch(() => {
        this.$message('已取消删除')
      })
    },

    // 关闭
    close (e) {
      this.flag.show = e
      this.control = true
      this.getSubject()
      this.ruleForm = {}
    },
    // 跳转标签页面
    gogo (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id
        }
      })
    },
    // 跳转到目录
    go (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.input-with-select {
    width: 200px;
  }
  .el-col-offset-2 {
    margin-left: 0;
  }
  ::v-deep .btn {
    margin-left: 2px;
    margin-top: 1.5px;
  }
  ::v-deep .right {
    float: right;
    transform: translateX(-1px)
  }
  ::v-deep .move, .ff {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
  }
  ::v-deep .ff {
    height: 53px;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  ::v-deep .el-pagination {
    float: right;
    margin-bottom: 15px;
    .el-pagination__jump {
      margin-left: 0 !important;
    }
  }
  ::v-deep .color {
    color: #666;
  }
  ::v-deep .color:hover {
    color: #66b1ff;
  }
</style>
